<template>
  <div>
    <div class="admin">
      <div class="adminHead">
        <van-nav-bar
          left-text="授权与协议"
          left-arrow
          class="adminNav"
          @click-left="$router.back()"
        />
        <div class="header not-login">
          <div class="login-btn">
            <span class="avatar"><i class="iconfont icon-wode"></i></span>
            <span class="text" @click="$router.push('/login')">陈佳容</span>
          </div>
        </div>
      </div>
      <div class="authorize-container">
        <div class="protocol">
          <p class="indentation">
            湖南家政平台在此特别提醒您（家服员、家政员）在阅读
          </p>
          <p>前，请认真阅读本《授权协议》（以下简称“协议”）请您谨</p>
          <p>慎阅读并选择接受或者不接受本协议。本协议由湖南家政平</p>
          <p>台根据国家政策实时更新，更新后协议条款一旦公布即代替</p>
          <p>原来的协议条款，恕不另行通知。</p>
          <h5>一、本人自愿申请建立家庭服务员信用记录</h5>
          <p class="indentation">
            本人自愿加入湖南家政平台，湖南家政平台可以使用本人
          </p>
          <p>身份信息、肖像信息、家庭服务信息和职业信息；身份信息</p>
          <p>包含但不限于身份证号码，姓名，性别，民族，家庭住址，</p>
          <p>健康状况，教育水平等；职业信息包含但不限于从业经历，</p>
          <p>培训情况、培训考核情况、消费者评价和投诉情况等；</p>
          <h5>二、本人承诺：</h5>
          <p class="indentation">
            本人自愿加入湖南家政平台，湖南家政平台可以使用本人
          </p>
          <p>身份信息、肖像信息、家庭服务信息和职业信息；身份信息</p>
          <p>包含但不限于身份证号码，姓名，性别，民族，家庭住址，</p>
          <p>健康状况，教育水平等；职业信息包含但不限于从业经历，</p>
          <p>培训情况、培训考核情况、消费者评价和投诉情况等；</p>
          <p class="indentation">
            请点击：我也已阅读并同意以上协议“按钮，代表您同意
          </p>
          <p>本协议的全部内容，并授权您在诚信平台的所有资料都可以</p>
          <p>向消费者显示。</p>
        </div>
        <div>
          <van-button
            block
            type="info"
            native-type="submit"
            class="footerBtn"
            @click="$router.push('/admin')"
            >提交认证</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style scoped lang="less">
/deep/.van-hairline--bottom::after {
  border-bottom-width: 0;
}
.admin {
  width: 752px;
  overflow: scroll;
  /deep/.van-nav-bar__content {
    height: 56px;
  }

  .adminHead {
    width: 752px;
    height: 412px;
    background-color: #3f51b5;
    /deep/.adminNav {
      .van-nav-bar__content {
        padding-top: 50px;
        background-color: #3f51b5;
      }
      .van-nav-bar__text {
        color: #fff;
        font-size: 32px;
      }
      .van-icon-arrow-left {
        color: #fff;
      }
    }
    .header {
      // border-top: solid #3f51b5;
      height: 284px;
      background-size: cover;
    }
    .not-login {
      display: flex;
      margin-top: -10px;
      background-color: #3f51b5;
      justify-content: center;
      align-items: center;
      .login-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: -40px;
        align-items: center;
      }
      .avatar {
        position: relative;
        width: 110px;
        height: 108px;
        margin-bottom: 15px;
        // background-color: #EEECEC ;
        border-radius: 50%;
        margin-bottom: 26px;
        background-color: rgba(238, 236, 236, 100);
        .iconfont {
          font-size: 52px;
          position: absolute;
          top: 24px;
          left: 30px;
          color: #979191;
        }
      }
      .text {
        font-size: 28px;
        color: #fff;
      }
    }
  }
  .authorize-container {
    width: 750px;
    height: 1142px;
    .protocol {
      width: 684px;
      height: 1000px;
      margin-left: 36px;
      margin-right: 30px;
      margin-top: -72px;
      padding: 18px 28px 0 30px;
      background-color: #fff;
      border-radius: 8px 8px 8px 8px;
      z-index: 2;
      .indentation {
        text-indent: 1em;
      }
      p {
        font-size: 24px;
        color: #101010;

        line-height: 20px;
      }
      h5 {
        font-size: 24px;
        color: #101010;
      }
    }
    .footerBtn {
      position: absolute;
      left: 0;
      top: 1406px;
      height: 98px;
    }
  }
}
</style>
